import {ref,} from "vue"
import {debounce,throttle,} from "lodash-es"
import { useXianLuStore } from "#imports"

export default defineNuxtComponent({
    name: "灵木区域",
    setup() {
        // 消息容器
        const xiaoxiRef = ref<HTMLElement|null>(null)
        const store = useXianLuStore()
        
        // 点击树
        const handleClickTree = throttle(() => {
            // 20%几率掉落木头，剩下的几率掉落杂物
            const random = Math.random()
            
            // 创建消息元素
            const messageEl = document.createElement('div')
            messageEl.style.animation = 'fadeUp 1.5s forwards'
            messageEl.style.position = 'absolute'
            messageEl.style.bottom = '0'
            
            // 添加经验值
            store.addExp(1)
            
            if (random < 0.2) {
                // 掉落木头
                messageEl.innerText = '获得了木头！'
                messageEl.style.color = '#8B4513'
                // 添加木头到仓库
                store.addItem({ type: 'wood', name: '木头', amount: 1 })
            } else {
                // 掉落杂物
                messageEl.innerText = '获得了杂物！'
                messageEl.style.color = '#808080'
                // 添加杂物到仓库
                // store.addItem({ type: 'misc', name: '杂物', amount: 1 })
            }
            
            // 添加消息到容器
            if (xiaoxiRef.value) {
                xiaoxiRef.value?.appendChild(messageEl)
                
                // 2秒后移除消息
                setTimeout(() => {
                    xiaoxiRef.value?.removeChild(messageEl)
                }, 2000)
            }
        }, 300)
        
        return () => {
            return <div class={"wh-full flex-center relative"}>
                <div ref={xiaoxiRef} class={"absolute top-0 right-0 w-200px h-200px overflow-hidden"}></div>
                <span
                    class={"text-400px cursor-pointer hover:text-blue-400 active:text-blue-300  transform transition-all active:scale-90 select-none"}
                    title={"点击砍树"}
                    onClick={handleClickTree}>树</span>
            </div>;
        };
    },
});